<div class="input__container input__container--variant">
        <div class="shadow__input shadow__input--variant"></div>
        <input type="text" name="text" class="input__search input__search--variant" placeholder="Search...">
        <button class="input__button__shadow input__button__shadow--variant">
          <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" height="1.5em" width="13em">
            <path d="M4 9a5 5 0 1110 0A5 5 0 014 9zm5-7a7 7 0 104.2 12.6.999.999 0 00.093.107l3 3a1 1 0 001.414-1.414l-3-3a.999.999 0 00-.107-.093A7 7 0 009 2z" fill-rule="evenodd" fill="#FFF"></path>
          </svg>
        </button>
      </div>
<style>
/* From Uiverse.io by Gautammsharma - Tags: clean, material design, minimalist, input, search, glow */
.input__container--variant {
  background: linear-gradient(to bottom, #F3FFF9, #F3FFF9);
  border-radius: 30px;
  max-width: 13em;
  padding: 1em 1em;
}

.shadow__input--variant {
  filter: blur(25px);
  border-radius: 30px;
  background-color: #F3FFF9;
  opacity: 0.5;
}

.input__button__shadow--variant {
  border-radius: 15px;
  background-color: #07372C;
  padding: 10px;
  border: none;
}

.input__button__shadow--variant:hover {
  background-color: #3C6659;
}

.input__search--variant {
  width: 13em;
  align-items: center;
  border-radius: 13em;
  outline: none;
  border: none;
  padding: 0.8em;
  font-size: 1.2em;
  color: #002019;
  background-color: transparent;
}

.input__search--variant::placeholder {
  color: #002019;
  opacity: 0.7;
}

.input__container--variant {
  background: linear-gradient(to bottom, #F3FFF9, #F3FFF9);
  border-radius: 1.5em;
  max-width: 14em;
  padding: 1em;
  box-shadow: 0em 1em 3em #beecdc64;
}

</style>
